import { Router, Route, Switch, Redirect } from 'react-router-dom'
import { Suspense, lazy } from 'react'
import { AuthRoute } from './components/AuthRoute'
import { customHistory } from './utils'
import { Spin } from 'antd'

import './App.scss'

const Layout = lazy(() => import('./pages/Layout'))
const Login = lazy(() => import('./pages/Login'))
const NotFound = lazy(() => import('./pages/NotFound'))

const App = () => {
  return (
    <Router history={customHistory}>
      <Suspense
        fallback={
          <div className="loading">
            <Spin tip="loading..." size="large"></Spin>
          </div>
        }
      >
        <div className="app">
          <Switch>
            <Route
              path="/"
              exact
              render={() => <Redirect to="/home" />}
            ></Route>
            {/* <Route path="/home" component={Layout}></Route> */}
            <AuthRoute path="/home" component={Layout}></AuthRoute>

            <Route path="/login" component={Login}></Route>

            {/* 404 */}
            <Route>
              <NotFound></NotFound>
            </Route>
          </Switch>
        </div>
      </Suspense>
    </Router>
  )
}

export default App
